<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./lib/bootstrap.css">
    <script src="./lib/jquery.js"></script>
</head>
<body style="padding: 15px;">
    <!-- 添加图书的Panel面板 -->
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h3 class="panel-title">添加新图书</h3>
    </div>
    <div class="panel-body form-inline">
      <!-- 顶部进行图书新增的结构部分 -->
      <div class="input-group">
        <div class="input-group-addon">书名</div>
        <input type="text" class="form-control" id="iptBookname" placeholder="请输入书名">
      </div>

      <div class="input-group">
        <div class="input-group-addon">作者</div>
        <input type="text" class="form-control" id="iptAuthor" placeholder="请输入作者">
      </div>

      <div class="input-group">
        <div class="input-group-addon">出版社</div>
        <input type="text" class="form-control" id="iptPublisher" placeholder="请输入出版社">
      </div>
      <!-- 点击添加新图书 -->
      <button id="btnAdd" class="btn btn-primary">添加</button>

    </div>
  </div>


  <!-- 图书的表格 -->
  <table class="table table-bordered table-hover">
    <thead>
      <tr>
        <th>Id</th>
        <th>书名</th>
        <th>作者</th>
        <th>出版社</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody id="tb">
      <!-- 用于放置图书信息的tbody标签 -->

      <!-- <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>删除</td>
      </tr> -->

    </tbody>
  </table>

  <script>
      /*
      分析：
        1 请求服务端的图书信息，进行表格展示
          - 根据接口请求数据，进行字符串拼接后，生成到tbody中即可
        2 新增图书功能
          - 点击新增按钮
          - 检测前面的三个输入框内容，如果为空，进行提示并阻止后续操作
          - 将合理的内容发送给接口，让服务端保存
          - 添加成功后，将表格内容进行更新
        3 删除功能
    */

    //1 一进入到页面就获取到后台的数据 进行展示(render)渲染页面

    $(function(){
        var baseUrl = 'http://www.liulongbin.top:3006'
        //1 展示数据 发送请求 获取数据

        renderList()

        function renderList(){

            $.ajax({
            url: baseUrl + '/api/getbooks',
            type : 'get',  //  默认就是get  可以不写
            data: {},      // data 如果没有数据可以不写
            beforeSend:function(){
                $('#tb').html('')
            },
            success:function(res){
                if(res.status == 200) {
                    var dataArr = res.data;
                    // console.log(dataArr)

                    //  $.each('数组',回调函数)
                    // $('伪数组').each('回调函数')
                    $.each(dataArr,function(index,eleVal){
                        // console.log(eleVal)

                //author: "大的"
                // bookname: "搜索"
                // id: "fc2bd8ad-fefe-11ea-804e-00163e105bba"
                // publisher: "搜索" 

                var newTr = $(`<tr>
                              <td>${eleVal.id}</td>
                              <td>${eleVal.bookname}</td>
                              <td>${eleVal.author}</td>
                              <td>${eleVal.publisher}</td>
                              <td><button class='delBtn'>删除</button></td>
                    </tr>`);
                    $('#tb').append(newTr)
                    })
                }
            },
            error:function(err){
                console.log(err);
            }

            })
          
        }

        //2 删除功能    /api/delbook 
        $('#tb').on('click','.delBtn',function(){
            // alert(1)
            var myId = $(this).parent().parent().children().eq(0).html();
            console.log(myId);

            $.ajax({
                url:baseUrl + '/api/delbook',
                type:'get',
                data:{
                    id:myId
                },
                success:function(res){
                    console.log(res);
                    if(res.status == 200){
                        renderList()
                    }
                }
            })
        })

      // 3    添加数据
      // 3.1  点击按钮绑定事件
      // 3.2  获取到3个输入框里面的内容
      // 3.3  判断值不能空  
      // 3.4  发送ajax请求 把值带给后台 后台返回添加之后的数据
      // 3.5  调用  renderList 方法 展示添加后的新数据
      $('#btnAdd').click(function(){
          var iptBookname = $('#iptBookname').val().trim();
          var iptAuthor = $('#iptAuthor').val().trim();
          var iptPublisher= $('#iptPublisher').val().trim();

          if(!iptBookname){
            alert('傻x  名字都不写 我怎么知道你要添加哪本书呢？ 名字不能为空')
            return false;
          }
          if(!iptAuthor){
            alert('傻x  名字都不写 我怎么知道你要添加哪本书呢？ 作者不能为空')
            return false;
          }
          if(!iptPublisher){
            alert('傻x  名字都不写 我怎么知道你要添加哪本书呢？ 出版社不能为空')
            return false;
          }

          $.ajax({
            url : baseUrl + '/api/addbook',
            type : 'post',
            data: {
              bookname : iptBookname,
              author : iptAuthor,
              publisher :iptPublisher,
            },
            success : function(res){
              console.log(res);
              if(res.status == 201) {
                renderList()
              }
            },
            complete : function(){
              console.log('不管成功失败我都要执行')
              $('#iptBookname').val('')
              $('#iptAuthor').val('')
              $('#iptPublisher').val('')
            }
          })
      })

    })
  </script>
</body>
</html>